<template>
    <div class="container-box">
        <div style="height: 98px;"></div>
        <div class="page">
            <div>
                <div class="page_title">设置基础参数</div>
                <div class="page_header">
                    <div class="button_item" v-for="(item, index) in setData" :key="index">
                        <el-button type="primary" @click="editInfo(item)" size="mini" icon="el-icon-edit">{{
                            item.name }}</el-button>
                    </div>
                </div>
            </div>
            <div class="page_content">
                <div class="content_title page_title">测试运费数据</div>
                <div>
                    <el-form :inline="true" :rules="rulesTwo" ref="formInline" :model="formInline"
                        class="demo-form-inline">
                        <el-row :gutter="12" class="rowInline">
                            <el-col :span="4">
                                <el-form-item label="路程" prop="distance">
                                    <el-input size="mini" v-model="formInline.distance" placeholder="请输入路程"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="货重" prop="weight">
                                    <el-input size="mini" v-model="formInline.weight" placeholder="请输入货重"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="类型" prop="container_type">
                                    <el-select size="mini" v-model="formInline.container_type" placeholder="请选择类型">
                                        <el-option v-for="(item, index) in container_size" :key="index"
                                            :label="item.name" :value="item.name"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="数量" prop="num">
                                    <el-input size="mini" v-model="formInline.num" placeholder="请输入数量"></el-input>
                                    <!-- <el-select size="small" v-model="formInline.number" placeholder="请选择柜子数量">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                            </el-select> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <el-form-item>
                                    <el-button type="primary" size="mini" @click="onSubmit('formInline')">计算</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <div class="freightPrice">运费： <span>{{ freightPrice }}</span></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <!-- <div class="freightPrice">运费： <span>{{ freightPrice }}</span></div> -->
            </div>
        </div>
        <div ref="tableWrapper" style="flex: 1;">
            <PriceMap ref="childMap" :mapHeight="mapHeight"></PriceMap>
        </div>
        <!-- 费用弹窗 -->
        <el-dialog :title="itemInfo.name" :visible.sync="dialogFormVisible" :width="diaWidth">
            <el-form v-if="itemInfo.label" :rules="rules" :model="itemInfo" ref="itemInfo">
                <el-form-item prop="value" :label="itemInfo.label" :label-width="formLabelWidth">
                    <el-input size="small" v-model="itemInfo.value" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <!-- :label="item[key] == 'bearing' ? '轴数/重量' : item[key]"   :row-class-name="tableRowClassName"  width="80"-->
            <el-table v-if="itemInfo.code == 'oil_consumption'" :data="itemInfo.value" style="width: 100%"
                :header-cell-style="{ background: 'rgb(242, 243, 245)', padding: '4px 0', fontSize: '12px' }"
                :cell-style="{ padding: '0 0', fontSize: '12px' }">
                <el-table-column v-for="(item, index) in columns" :key="index" :label="item.key" align="center">
                    <template slot-scope="scope">
                        <el-input size="small" v-if="item.key != '轴数/重量'"
                            style="font-size: 12px;border: 1px solid #eee;border-radius: 6px; margin: 5px 0;"
                            v-model="scope.row[item.key]"></el-input>
                        <span v-if="item.key == '轴数/重量'">{{ scope.row.bearing }}</span>
                    </template>
                </el-table-column>
            </el-table>

            <el-table v-if="itemInfo.code == 'mileage_cost'" :data="itemInfo.value" style="width: 100%"
                :header-cell-style="{ background: 'rgb(242, 243, 245)', padding: '4px 0', fontSize: '12px' }"
                :cell-style="{ padding: '0 0', fontSize: '12px' }">
                <el-table-column label="公里" prop="distance" align="center">
                </el-table-column>
                <el-table-column label="车辆损耗" align="center">
                    <template slot-scope="scope">
                        <el-input size="small"
                            style="font-size: 12px;border: 1px solid #eee;border-radius: 6px; margin: 5px 0;"
                            v-model="scope.row.loss_amount"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="车辆利润" align="center">
                    <template slot-scope="scope">
                        <el-input size="small"
                            style="font-size: 12px;border: 1px solid #eee;border-radius: 6px; margin: 5px 0;"
                            v-model="scope.row.profit_amount"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="司机工资" align="center">
                    <template slot-scope="scope">
                        <el-input size="small"
                            style="font-size: 12px;border: 1px solid #eee;border-radius: 6px; margin: 5px 0;"
                            v-model="scope.row.driver_amount"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="setPrice('itemInfo')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<!-- [{"轴数/重量":4,"0-5":30,"5-10":31,},
{"轴数/重量":5,"0-5":30,"5-10":31,},
{"轴数/重量":6,"0-5":30,"5-10":31}] -->
<script>
import { settingGetInfo, editGetInfo, getPrice, argument, getBoxInfo } from '@/api/api'
import PriceMap from './priceMap/priceMap.vue'
export default {
    components: {
        PriceMap
    },
    created () {
        this.fetTableHeight()
    },
    data () {
        return {
            mapHeight: 400,
            // 基础参数
            setData: [
                {
                    name: '油耗',
                    code: 'oil_consumption',
                    type: '3',
                    label: '',
                    value: []
                },
                {
                    name: '油价',
                    code: 'oilPrice',
                    type: '3',
                    label: '当前油价',
                    value: ''
                },
                {
                    name: '公里',
                    code: 'mileage_cost',
                    type: '3',
                    label: '',
                    value: [],
                },
                // {
                //     name: '设置平台利润',
                //     code: 'service_amount',
                //     type: '3',
                //     label: '每公里平台利润',
                //     value: ''
                // },
                {
                    name: '特殊',
                    code: 'special_amount',
                    type: '3',
                    label: '每单特殊费用',
                    value: ''
                },
            ],
            formInline: {
                distance: '',
                weight: '',
                container_type: '',
                num: ''
            },
            diaWidth: '',
            freightPrice: '0.00',
            dialogFormVisible: false,
            formLabelWidth: '120px',
            itemInfo: {},
            // 表头数组
            columns: [],
            // 柜型数组
            container_size: [],
            rules: {
                value: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                ]
            },
            rulesTwo: {
                distance: [
                    { required: true, message: '请输入路程', trigger: 'blur' },
                ],
                weight: [
                    { required: true, message: '请输入货重', trigger: 'blur' },
                ],
                container_type: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],
                num: [
                    { required: true, message: '请输入数量', trigger: 'blur' },
                ],
            }
        }
    },
    mounted () {
        this.getBoxInfo()
    },
    methods: {
        // 获取运费
        onSubmit (formNames) {
            const formData = new FormData()
            for (const key in this.formInline) {
                formData.append(key, this.formInline[key])
            }
            this.$refs[formNames].validate((valid) => {
                if (valid) {
                    getPrice(formData).then(res => {
                        console.log('我是运费', res);
                        if (res.status == 200) {
                            this.freightPrice = res.data.suggest_amount
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        // 获取柜型参数
        getBoxInfo () {
            argument().then(res => {
                console.log('我是柜型参数', res);
                if (res.status == 200) {
                    this.container_size = res.data.container_size
                }
            })
        },
        // 查看价格
        editInfo (item) {
            // 处理表头
            if (item.code == 'oil_consumption') {
                this.diaWidth = '60%'
            } else if (item.code == 'mileage_cost') {
                this.diaWidth = '45%'
            } else {
                this.diaWidth = '30%'
            }
            this.itemInfo = item
            const code = item.code
            console.log('我是item信息', this.itemInfo);

            const formData = new FormData()
            formData.append('code', code)
            formData.append('type', item.type)
            settingGetInfo(formData).then(res => {
                console.log('我是费用信息', res);
                if (res.status == 200) {
                    this.itemInfo.value = res.data[code]
                    // 处理表头
                    if (item.code == 'oil_consumption') {
                        this.columns = Object.keys(this.itemInfo.value[0]).map(key => ({
                            key: key
                        }));
                        this.columns.forEach(item => {
                            if (item.key == 'bearing') {
                                item.key = '轴数/重量'
                            }
                        })
                    }
                }
            })
            this.dialogFormVisible = true
        },
        // 提交修改
        setPrice (formName) {
            let flag = true
            const formData = new FormData()
            formData.append('code', this.itemInfo.code)
            formData.append('type', this.itemInfo.type)

            if (this.itemInfo.code == 'mileage_cost') {
                console.log('1111111111', this.itemInfo.code);
                for (const item of this.itemInfo.value) {
                    for (const key in item) {
                        if (!item[key]) {
                            this.$alert('请将费用信息填写完整', '提示', {
                                confirmButtonText: '确定',
                            });
                            return false
                        }
                    }
                }

                if (flag) {
                    this.itemInfo.value.forEach((item, index) => {
                        for (const key in item) {
                            formData.append(`value[${index}][${key}]`, item[key])
                        }
                    })
                }

            } else if (this.itemInfo.code == 'oil_consumption') {
                for (let i = 0; i < this.itemInfo.value.length; i++) {
                    for (const key in this.itemInfo.value[i]) {
                        if (!this.itemInfo.value[i][key]) {
                            this.$alert('请将油耗信息填写完整', '提示', {
                                confirmButtonText: '确定',
                            });
                            return false
                        }
                    }

                }

                if (flag) {
                    this.itemInfo.value.forEach((item, index) => {
                        for (const key in item) {
                            formData.append(`value[${index}][${key}]`, item[key])
                        }
                    })
                }
            } else {
                formData.append('value', this.itemInfo.value)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        flag = true

                    } else {
                        flag = false
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
            if (flag) {
                editGetInfo(formData).then(res => {
                    console.log('修改成功', res);
                    if (res.status == 200) {
                        this.dialogFormVisible = false
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                    }
                })
            }
        },
        // 地图高度
        resetHeight () {
            return new Promise((resolve, reject) => {
                this.tableH = 0
                resolve()
            })
        },
        // 设置table高度
        fetTableHeight () {
            this.resetHeight().then(res => {
                this.mapHeight = this.$refs.tableWrapper.getBoundingClientRect().height
                console.log('mapHeight', this.mapHeight);
                // this.$refs.childMap.loadMap()


                // 设置最小高度，确保表格可以正常显示
                // this.tableH = Math.max(containerHeight - 10, 200); // 最小300px
            })
        },
    }
}
</script>

<style scoped lang="scss">
.page {
    padding: 20px 24px;
    display: flex;
    align-items: center;
}

.page_title {
    color: rgb(29, 33, 41);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}

.page_header {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    // flex-wrap: wrap;
}

.button_item {
    margin-right: 20px;
    margin-bottom: 20px;
}

.freightPrice {
    color: rgb(29, 33, 41);
    font-size: 14px;
    font-weight: 500;
}

.freightPrice span {
    color: rgb(255, 125, 0);
}

::v-deep .el-form-item--medium .el-form-item__label {
    line-height: 20px;
}

.rowInline {
    display: flex;
    align-items: center;
}

::v-deep .el-form-item {
    margin-bottom: 0px !important;
}

.container-box {
    // background: #f5f7fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}
::v-deep .el-form-item__content > .el-select > .el-input > .el-input__inner, .el-form-item__content > .filter-input > .el-input__inner {
width: 120px;
}
</style>